<template>
  <el-slider
    class="form-slider"
    v-model="formValue"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
export default {
  name: "form-slider",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: ["value"], // 这里的值存在多种类型
  computed: {
    formValue: {
      get() {
        if (this.$attrs.range) {
          let arr = [0, 0];
          if (this.value) arr = this.value.split(",");
          return arr.map((item) => parseInt(item));
        }
        return parseInt(this.value || 0);
      },
      set(value) {
        if (this.$attrs.range) {
          this.$emit("update", value.length ? value.join(",") : "");
          return;
        }
        this.$emit("update", value + "");
      },
    },
  },
};
</script>

<style lang="scss">
.form-slider {
  .el-slider__button-wrapper {
    z-index: 1;
  }
}
</style>
